<template>
	<view class="container">
		<view class="main">
			<view class="name_bg">
				<view class="name_bg_left">
					<text class="name_bg_name">模板名称</text>
				</view>
				<view class="name_bg_right">
					<input placeholder="填写模板名称" v-model="temp_name" class="temp_input"/>
				</view>
			</view><!--goods_bg end-->
			<view class="add_main">
				<view class="add-bg">
					<view class="section line_bottom">
						<view class="sec_left" @click="selectAddress(1)">
							<view class="sec_l_icon">装</view>
							<view class="sec_l_text" v-if="start_address_show == ''">必填，请选择装货地址</view>
							<view class="sec_l_text" v-else>{{start_address_show}}</view>
						</view>
					</view><!--section end -->
					<view class="section">
						<view class="sec_left"  @click="selectAddress(2)">
							<view class="sec_l_icon_org">卸</view>
							<view class="sec_l_text" v-if="end_address_show == ''">必填，请选择卸货地址</view>
							<view class="sec_l_text" v-else>{{end_address_show}}</view>
						</view>
					</view><!--section end -->
				</view><!--add-bg end-->
				<view class="add_desc">
					<view>一装一卸</view>
					<view class="distance" v-if="distance > 0">预估总里程约{{distance/1000.00}}公里</view>
				</view>
			</view><!--add_main end-->
			<view class="goods_bg">
				<view class="goods_bg_left">
					<text class="red">*</text><text class="text">货物信息</text>
				</view>
				<view class="goods_bg_right" @click="gotoGoods()">
					<text class="goods_text" v-if="goods_info_show == ''">必填，请选择填写信息</text>
					<text class="goods_text" v-else>{{goods_info_show}}</text>
					<image class="goods_arrow" src="/static/images/arrow.png"></image>
				</view>
			</view><!--goods_bg end-->
			<view class="car_type">
				<view class="car_type_left">
					<text class="red">*</text><text class="text">用车类型</text>
				</view>
				<view class="car_type_right">
					<view class="type_btn" @click="changeType(0)" :class="type==0?'btn_selected':''">整车</view>
					<view class="type_btn" @click="changeType(1)" :class="type==1?'btn_selected':''">拼车</view>
				</view>
			</view><!--car_type end-->
			<view class="goods_bg"> 
				<view class="goods_bg_left">
					<text class="red">*</text><text class="text">车长车型</text>
				</view>
				<view class="goods_bg_right" @click="showSelectCarLength()">
					<text class="goods_text" v-if="car_type_length_show == ''">必填，请选择填写信息</text>
					<text class="goods_text" v-else>{{car_type_length_show}}</text>
					<image class="goods_arrow" src="/static/images/arrow.png"></image>
				</view>
			</view><!--goods_bg end-->
		</view><!--main end-->
		<view class="footer">
			<view class="submit-btn" @click="submitEvent()">保存</view>
		</view>
		
		
		<uni-popup ref="pop" class="popup-cls">
			<view class="pop-info">
				<view class="pop-top">
					车长车型（必填，最多3项）
				</view>
				<view class="center"> 
					<view class="warning">请根据实际货物运输需求合理选择车辆，避免超载超限。</view>
					<scroll-view class="pop-content" scroll-y="true">
						<view class="list">
							<view class="bottom">
								<scroll-view class="pop-content" scroll-y="true">
									<template v-for="n in types">
										<view class="item" @click="selectCarType(n)">{{n.name}}</view>
										<view class="item-body">
											<view class="item-i" v-for="l in n.children" :class="car_length_ids.indexOf(l.id)!== -1?'item_selected':''" @click="selectLengthData(l)">{{l.len/100}}米</view>
										</view>
									</template>
								</scroll-view>
							</view>
						</view>
					</scroll-view>
					<view class="btn" @click="confirmSelCarLength()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {cartype_list,cal_distinces} from '@/api/common.js';
	import {tempAdd} from '@/api/logistic.js';
	export default {
		data() {
			return {
				temp_name:'',//模板名称
				isPrice:false,
				type:0,//0整车,1零担发货
				types:[],//车型车长数据
				start_address_show:'',//装货地址
				start_province:'',//开始省
				start_city:'',//开始市
				start_distinct:'',//开始区
				start_address:'',//地址
				end_address_show:'',//卸货地址
				end_province:'',//结束省
				end_city:'',//结束市
				end_distinct:'',//结束区
				end_address:'',//地址
				goods_info_show:'',//货物显示信息
				car_length_ids:[],//车长ids
				goods_data:'',//物品信息
				start_lat:'',
				start_lon:'',
				end_lat:'',
				end_lon:'',
				distance:0,
				car_type_length_show:'',//车长车型显示用
				operationing:false,
				id:0,
				car_length_show:[],//选择的车长显示数据
			}
		},
		onLoad(options) {
			this.getCarTypeData();
		},
		methods: {
			selectLengthData(item){
				let that = this;
				let exists = this.car_length_ids.indexOf(item.id);
				if(exists === -1){
					if(this.car_length_ids.length >= 3){
						uni.showToast({
							icon:'none',
							title:'最多选择三个车长'
						});
						return;
					}
					this.car_length_ids.push(item.id);
				}else{
					this.car_length_ids.forEach(n => {
						if(n == item.id){
							that.car_length_ids.splice(that.car_length_ids.indexOf(n),1)
						}
					});
				}
				//获取选择的数据
				that.car_length_show = [];
				this.types.forEach(n => {
					n['children'].forEach(ns => {
						that.car_length_ids.forEach(i => {
							if(i == ns.id){
								that.car_length_show.push(ns);
							}
						})
					})
				})
				//转换显示
				let types_show = {};
				this.car_length_show.forEach(function (n, index) {
					let list = types_show[n.type_name];
					if(list == undefined){
						list = [];
					}
					list.push(n.len/100 + "米");
					types_show[n.type_name] = list;
				});
				let types = [];
				for (const key in types_show) {
				   types.push(key + "("+ types_show[key].join(",") + ")");
				}
				this.car_type_length_show = types.join(",");
				console.info(this.car_type_length_show);
			},
			gotoGoods(){
				uni.navigateTo({
					url:'/pages/news/publish/goods/goods'
				})
			},
			//选择地址
			selectAddress(type){
				uni.navigateTo({
					url:'/pages/news/publish/address/address?type='+type
				})
			},
			
			//类型
			changeType(type){
				this.type = type;
			},
			//车长
			showSelectCarLength(){
				this.$refs.pop.open('bottom');
			},
			//确定车长选择
			confirmSelCarLength(){
				this.$refs.pop.close();
			},
			getCarTypeData(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				cartype_list({}).then((res) => {
					let data = res.data.list;
					 that.types = data;
					uni.hideLoading();
				});
			},
			//接收地址数据
			address_data_receive(data){
				if(data.type == 1){
					let dats = data.place.split('/');
					this.start_province = dats[0];
					this.start_city = dats[1];
					this.start_distinct = dats[2];
					this.start_address_show = dats.join("")+data.address;
					this.start_address = data.address;
					this.start_name = data.name;
					this.start_phone = data.phone;
				}else{
					let dats = data.place.split('/');
					this.end_province = dats[0];
					this.end_city = dats[1];
					this.end_distinct = dats[2];
					this.end_address_show = dats.join("")+data.address;
					this.end_address = data.address;
					this.end_name = data.name;
					this.end_phone = data.phone;
				}
				this.loadDistince();
			},
			//接收物品页面选择数据
			goods_data_receive(data){
				let name = data.name+ "，" + data.wrap_way + "，";
				if(data.weight_start == data.weight_end){
					name += data.weight_start +"吨，";
				}else{
					name += data.weight_start +"-"+data.weight_end+"吨，";
				}
				if(data.volumn_start == data.volumn_end){
					name += data.volumn_start +"方，";
				}else{
					name += data.volumn_start +"-"+data.volumn_end+"方，";
				}
				name += data.num + "辆";
				this.goods_info_show = name;
				this.goods_data = data;
				console.info("数据："+data);
			},
			//获取两地距离
			loadDistince(){
				if(this.start_address == '' || this.end_address == ''){
					return;
				}
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				let data = {
					from:this.start_province+this.start_city+this.start_distinct+this.start_address,
					to:this.end_province+this.end_city+this.end_distinct+this.end_address
				}
				cal_distinces(data).then((res) => {
					let data = res.data;
					 console.info(data);
					that.distance = data.distance;
					that.start_lat = data.from['lat'];
					that.start_lon = data.from['lng'];
					that.end_lat = data.to['lat'];
					that.end_lon = data.to['lng'];
					uni.hideLoading();
				});
			},
			submitEvent(){
				
				let that = this; 
				if(this.temp_name.length == 0|| this.temp_name.length > 50){
					uni.showToast({
						icon:'none',
						title:'请输入模板名称'
					})
					return;
				}
				if(this.start_lat == '' || this.start_lon == ''){
					uni.showToast({
						icon:'none',
						title:'请输入正确装货地址'
					})
					return;
				}
				if(this.end_lat == '' || this.end_lon == ''){
					uni.showToast({
						icon:'none',
						title:'请输入正确卸货地址'
					})
					return;
				}
				if(this.goods_data['goods_id'] == ''){
					uni.showToast({
						icon:'none',
						title:'请选择货物'
					})
					return;
				}
				if(this.goods_data['goods_id'] == ''){
					uni.showToast({
						icon:'none',
						title:'请选择货物'
					})
					return;
				}
				if(this.car_length_ids.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择车型'
					})
					return;
				}
				
				let params = {
					temp_name:this.temp_name,
					start_province:this.start_province,
					start_city:this.start_city,
					start_distinct:this.start_distinct,
					start_address:this.start_address,
					start_name:this.start_name,
					start_phone:this.start_phone,
					start_lat:this.start_lat,
					start_lon:this.start_lon,
					end_province:this.end_province,
					end_city:this.end_city,
					end_distinct:this.end_distinct,
					end_address:this.end_address,
					end_name:this.end_name,
					end_phone:this.end_phone,
					end_lat:this.end_lat,
					end_lon:this.end_lon,
					type:this.type,
					car_length_ids:this.car_length_ids.join(','),
					distance:this.distance,
					car_type_len:this.car_type_length_show,
				};
				let result = Object.assign(this.goods_data,params);
				console.info(result);
				//提交接口保存 
				if(that.operationing)return;
				uni.showLoading({
					title:'处理中...'
				});
				that.operationing = true;
				tempAdd(result).then((res) => {
					that.operationing = false;
					uni.hideLoading();
					if(res.status == 200){
						uni.showToast({
							icon:'success',
							title:'保存成功'
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000);
					}
				}).catch(err => {
					that.operationing = false;
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					})
				});
			}//end method 
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.container{
		display: flex;
		flex-direction: column;
		.main{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			margin-bottom: 100;
			.name_bg{
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 100rpx;
				align-items: center;
				background-color: white;
				padding: 0rpx 30rpx;
				.name_bg_left{
					color: black;
					font-size: 28rpx;
					width: 120rpx;
				}
				.name_bg_right{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 30rpx;
					flex: 1;
					.temp_input{
						background-color: #f1f1f1;
						flex: 1;
						padding: 10rpx;
					}
				}
			}
			.add_main{
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				background-color: white;
				.add-bg{
					display: flex;
					flex-direction: column;
					.section{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						height: 130rpx;
						.sec_left{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-left: 30rpx;
							margin-right: 30rpx;
							flex: 1;
							.sec_l_icon{
								width: 40rpx;
								height: 40rpx;
								text-align: center;
								line-height: 40rpx;
								background-color: #008CFF;
								color: white;
								border-radius: 6rpx;
								font-size: 20rpx;
							}
							.sec_l_icon_org{
								width: 40rpx;
								height: 40rpx;
								text-align: center;
								line-height: 40rpx;
								background-color: orange;
								color: white;
								border-radius: 6rpx;
								font-size: 20rpx;
							}
							.sec_l_text{
								color: gray;
								font-size: 30rpx;
								font-weight: bold;
								margin-left: 30rpx;
							}
						}
						.sec_right{
							width: 100rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							.sec_r_icon{
								width: 30rpx;
								height: 30rpx;
							}
							.sec_r_text{
								color: gray;
								font-size: 28rpx;
							}
						}
					}//section end
					.line_bottom{
						border-bottom: 1rpx solid #f1f1f1;
					}
				}//add-bg end
				.add_desc{
					background-color: #f8f8f8;
					color: gray;
					font-size: 28rpx;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 30rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.distance{
						color: orange;
					}
				}
			}//add_main end
			.goods_bg{
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 100rpx;
				align-items: center;
				background-color: white;
				padding: 0rpx 30rpx;
				.goods_bg_left{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 200rpx;
					.red{
						color: red;
					}
					.text{
						color: black;
						font-size: 28rpx;
					}
				}
				.goods_bg_right{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 30rpx;
					flex-wrap: nowrap;
					.goods_text{
						font-size: 28rpx;
						color: gray;
					}
					.goods_arrow{
						width: 26rpx;
						height: 26rpx;
					}
				}
			}//goods_bg end
			.car_type{
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 100rpx;
				align-items: center;
				background-color: white;
				padding: 0rpx 30rpx;
				.car_type_left{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 200rpx;
					.red{
						color: red;
					}
					.text{
						color: black;
						font-size: 28rpx;
					}
				}
				.car_type_right{
					display: flex;
					flex-direction: row;
					align-items: center;
					.type_btn{
						width: 150rpx;
						height: 60rpx;
						color: black;
						font-size: 28rpx;
						line-height: 60rpx;
						text-align: center;
						background-color: #f2f2f2;
					}
					.btn_selected{
						color: darkorange;
						background-color: blanchedalmond;
					}
				}
			}//car_type end
			.price_bg{
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 100rpx;
				align-items: center;
				background-color: white;
				padding: 0rpx 30rpx;
				.price_bg_left{
					display: flex;
					flex-direction: row;
					align-items: center;
					.icon{
						width: 40rpx;
						height:40rpx;
					}
					.desc{
						display: flex;
						flex-direction: column;
						margin-left: 10rpx;
						.desc_up{
							color: black;
							font-size: 28rpx;
						}
						.desc_down{
							color: gray;
							font-size: 20rpx;
						}
					}
				}
				.price_bg_right{
					display: flex;
					flex-direction: row;
					align-items: center;
					.left{
						display: flex;
						flex-direction: column;
						margin-right: 10rpx;
						align-items: flex-end;
						.left_up{
							color: black;
							font-size: 28rpx;
						}
						.left_down{
							color: gray;
							font-size: 20rpx;
						}
					}
					.radio{
						// height: 43rpx;
						// width: 43rpx;
					}
				}
			}//price_bg end
		}//main end
		
		.footer{
			height: 80rpx;
			width: 100%;
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			.submit-btn{
				background-color: $uni-main-color;
				color: white;
				font-size: 28rpx;
				height: 80rpx;
				width: 100%;
				text-align: center;
				line-height: 80rpx;
			}
		}
		//end footer 
		/** 弹窗 **/
		.popup-cls{
			display: flex;
			flex-direction: column;
			.pop-info{
				width:100%;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				margin: 0 auto;
				background-color: white;
				.pop-top{
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					align-items: center;
					font-size: 28rpx;
					color: #000000;
					font-weight: bold;
					margin-top: 20rpx;
					text-align: center;
					height: 40rpx;
				}
			}
			
			.center{
				margin-top: 30rpx;
				width:100%;
				padding: 0rpx 0rpx;
				display: flex;
				flex-direction: column;
				.warning{
					color: darkorange;
					font-size: 28rpx;
					padding: 0 30rpx;
				}
				.pop-content{
					display: flex;
					flex-direction: column;
					height: 700rpx;
					margin-top: 30rpx;
					.list{
						display: flex;
						flex-direction: column;
						.top{
							display: flex;
							flex-direction: row;
							padding: 0 30rpx;
							.red{
								color: red;
							}
							.title{
								font-size: 28rpx;
								font-weight: bold;
								color: black;
							}
							.desc{
								font-size: 28rpx;
								color: gray;
							}
						}
						.bottom{
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							margin-top: 20rpx;
							// padding-left: 10rpx;
							.item{
								color: black;
								height:70rpx;
								line-height: 70rpx;
								margin-left: 30rpx;
								font-weight: bold;
							}
							.item-body{
								display: flex;
								flex-direction: row;
								flex-wrap: wrap;
								margin-top: 20rpx;
								.item-i{
									width: 16%;
									background-color: #f2f2f2;
									color: black;
									text-align: center;
									height:60rpx;
									line-height: 60rpx;
									margin-bottom: 20rpx;
									border-radius: 10rpx;
									border: 1rpx solid #f2f2f2;
									margin-left: 20rpx;
								}
								.item_selected{
									border: 1rpx solid orange;
									background-color: blanchedalmond;
									color: orange;
								}
							}
							//不能选择
							.item_unselected{
								border: 1rpx solid #f2f2f2;
								background-color: #f2f2f2;
								color: gray;
							}
						}//bottom end
					}
				}
				//pop-content
				.btn{
					background-color: $uni-main-color;
					color: white;
					font-size: 28rpx;
					height: 80rpx;
					width: 100%;
					text-align: center;
					line-height: 80rpx;
				}
			}//center
			
		}//popup-cls end
	}
	
</style>
